<template>
    <div class="ctbsc-list">

        <div class="channel-box">
            <van-sticky>
                <NavBar pathName="list" :title="channelInfo.name"></NavBar>
                <van-tabs v-model="active" @change="swichTab" title-active-color="#1AA97B"  v-if="channelInfo['children']&&channelInfo['children'].length>0">
                    <van-tab title="全部"></van-tab>
                    <van-tab v-for="(item,index) in channelInfo['children']" :title="item.name" :key="index"></van-tab>
                </van-tabs>
            </van-sticky>
            <div class="list-box" v-if="showStatus">
                <van-cell-group v-if="records.length>0" title="" class="van-hairline--surround">
                    <template v-for="(item,index) in records">
                        <van-cell :to="'/detail/'+item.id">
                            <template #default>
                                <div class="item-box">
                                    <div class="img">
                                        <img :src="$utils.getIconImg(item.type)" alt="">
<!--                                        <i :style="'color:'+$utils.getIconColor('docx')"-->
<!--                                                        :class="'far '+$utils.getIcon('docx')"></i>-->
                                    </div>
                                    <div class="item-con">
                                        <div class="item-title van-ellipsis">{{item.title}}</div>
                                        <div class="item-des van-ellipsis">{{item.title}}</div>
                                        <div class="item-nums">
                                            <span><van-icon name="underway-o"/>  {{item['human_time']}}</span>
                                            <span><van-icon name="eye-o"/> {{item['see_num']}}</span>
                                            <span><van-icon name="down"/> {{item['download_num']}}</span>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </van-cell>
                    </template>


                </van-cell-group>
                <van-empty description="暂无记录" v-else/>

                <van-pagination v-if="total/pageParams.pageSize>1" force-ellipses @change="handleCurrentChange" v-model="pageParams.page" :total-items="total" :show-page-size="4">
                    <template #prev-text>
                        <van-icon name="arrow-left" />
                    </template>
                    <template #next-text>
                        <van-icon name="arrow" />
                    </template>
                    <template #page="{ text }">{{ text }}</template>
                </van-pagination>
            </div>
            <van-loading color="#1AA97B" style="position: fixed;top:50%;left:50%;transform: translate(-50%,-50%);" v-if="!loading"/>
        </div>
    </div>
</template>

<script>
    import NavBar from "@/components/NavBar.vue";
    export default {
        name: "ListView",
        components: {
            NavBar
        },
        data() {
            return {
                classifies: [],
                records: [],
                channelInfo: {},
                active:0,
                channelSonInfo: {},
                loading: false,
                id: null,
                sonId: null,
                showStatus:false,
                params: {
                    id: '',
                    sonid: ''
                },
                from:'',
                total: 0,
                postParams: {
                    classifyId: '',
                    title: '',
                },
                pageParams: {
                    page: 1,
                    pageSize: 90
                },
                watcher:null

            };
        },
        beforeRouteEnter(to, from, next) {
            next(vm => vm.from=from.name)
        },
        deactivated () {

        },
        activated(){
            if(this.from!='detail'){
                this.pageParams.page=1;
                this.params = this.$route.params
                if (this.params.id) {
                    this.postParams.classifyId = this.params.id;
                }
                if (this.params.sonid) {
                    this.postParams.classifyId = this.params.sonid;
                }
                this.getList()
            }

        },
        created() {

        },
        mounted:function(){

            this.$nextTick(()=>{
                // window.scrollTo(0,0)
            });
        },
        methods: {
            swichTab(e){
                window.scrollTo(0,0);
                this.pageParams.page=1;
                this.pageParams.pageSize=30;
                if(e===0){
                    this.postParams.classifyId=this.channelInfo.id;
                }else{
                    this.postParams.classifyId=this.channelInfo.children[e-1].id;
                }
                this.getDataList();
            },
            handleSizeChange(val) {
                this.pageParams.pageSize = val;
                this.getDataList();

            },
            handleCurrentChange(val) {
                this.pageParams.page = val;
                this.getDataList();

            },
            getList() {
                this.$apis.homeData(this.postParams).then(res => {
                    this.classifies = res.classifies;
                    for (let i = 0; i < res.classifies.length; i++) {
                        if (this.params.id == res.classifies[i].id) {
                            this.channelInfo = res.classifies[i];
                            this.channelSonInfo = {};
                            this.$utils.setPageTitle(this.channelInfo.name)
                            if (this.channelInfo['children']) {
                                for (let j = 0; j < this.channelInfo.children.length; j++) {
                                    if (this.params.sonid == this.channelInfo.children[j].id) {
                                        this.channelSonInfo = this.channelInfo.children[j];
                                        this.active=j+1;
                                        this.$utils.setPageTitle(this.channelSonInfo.name)
                                    }
                                }

                            }
                        }
                    }

                    this.getDataList();
                })
            },
            getDataList() {
                //请求列表数据
                let listParams = {...this.postParams, ...this.pageParams};
                this.loading = false;
                this.$apis.getDataList(listParams).then(lstres => {
                    let records = lstres.records;
                    this.total = lstres.total;
                    this.records = lstres.records;
                    this.loading = true;

                    this.showStatus=true;

                })

            }
        }
    };
</script>
<style lang="less" scoped>

    .ctbsc-list {
        padding: 0px 0px;
        background: #f7f8fa;
        min-height: 100vh;
    }

    .channel-box {
        .channel-item {
            margin-bottom: 10px;
        }

        .van-cell {
            align-items: center;

            .b-title {
                font-size: 16px;

            }

            .extra-icon {
                margin-right: 5px;
                font-size: 16px;
                color: #969799;
            }
        }

        .cell-son {
            display: flex;
            padding: 10px;
            justify-content: space-between;
            flex-wrap: wrap;

            .van-cell {
                margin-bottom: 5px;
                padding: 5px;
                width: 48%;
                font-size: 12px;
                background: #f7f8fa;

            }
        }
    }

</style>
